<template>
  <div class="tab" @click="handleTabClick" v-show="!this.level">
    <router-link class="tab-item" tag="div" to="/news">
      <span class="tab-link">新闻</span>
    </router-link>
    <router-link class="tab-item" tag="div" to="/movies">
      <span class="tab-link">电影</span>
    </router-link>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'Tab',
  methods: {
    handleTabClick (e) {
      this.$store.dispatch('changeTab', e.target.innerText)
    }
  },
  computed: {
    ...mapState(['level'])
  }
}
</script>

<style lang="stylus" scoped>
  @import "~styles/variable"
  .tab
    position: fixed
    bottom: 0
    width: 100%
    display: flex
    height: 44px
    line-height: 44px
    font-size: 14px
    .tab-item
      flex: 1
      text-align: center
      background-color: $color-background
      border: 1px solid #ddd
      .tab-link
        color: $color-none
        padding-bottom: .05rem
      &.router-link-active
        .tab-link
          color: $color-text
          border-bottom: 2px solid $color-text
</style>
